<template>
  <div
    class="relative overflow-hidden cursor-pointer"
    :style="{
      width: size + 'px',
      height: size + 'px',
      borderRadius: round + 'px'
    }"
  >
    <div class="w-full h-full bg-[#f2f2f2] flex justify-center items-center" v-if="!src">
      <img class="w-full h-full" :src="upload ? uploadDefault : avatarDefault" />
    </div>
    <el-image
      v-else
      class="w-full h-full cursor-pointer"
      :src="netPath(src)"
      @click="handlePreview"
    >
      <template #error>
        <div class="image-slot">
          <img class="w-full h-full" :src="avatarDefault" />
        </div>
      </template>
    </el-image>
  </div>
  <el-dialog append-to-body title="预览" v-model="state.previewVisible" width="340px">
    <div class="flex justify-center items-center pb-[20px]">
      <el-image lazy class="w-min-[100px] w-full p-[10px]" :src="state.previewPath" fit="contain">
        <template #error>
          <div class="image-slot">
            <el-icon><CarNoImage /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { netPath } from "@/utils/common";
import avatarDefault from "@/assets/images/img-avatar-default.jpg";
import uploadDefault from "@/assets/images/upload-default.jpg";

const props = withDefaults(
  defineProps<{
    src: string;
    size?: number;
    round?: number;
    upload?: boolean;
    noClick?: boolean;
  }>(),
  {
    src: "",
    size: 100,
    round: 6,
    upload: false,
    noClick: false
  }
);

const state = reactive({
  previewVisible: false,
  previewPath: ""
});
const handlePreview = () => {
  if (!props.src || props.noClick) {
    return;
  }
  state.previewVisible = true;
  state.previewPath = netPath(props.src) as string;
};
</script>
